import React from "react";
import { NoticeBar } from "antd-mobile";
import styles from "./index.module.css";
import tu from "../../assets/1.png";
import tu2 from "../../assets/2.png";
import tu3 from "../../assets/3.png";
import xiao from "../../assets/4.png";
import xiao2 from "../../assets/5.png";
import xiao3 from "../../assets/6.png";
import xiao4 from "../../assets/7.png";
import xiao5 from "../../assets/8.png";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const tozhuan = () => {
    navigate("/yuyue");
  };
  const tojisu = () => {
    navigate("/mjs");
  };
  const tofuzhen = () => {
    navigate("/fuzhen");
  };
  // 问专家
  const towen = () => {
    navigate("/expert");
  };
  //   开药门诊
  const tokai = () => {
    navigate("/kaiyaomenzhen");
  };
  //义诊直播
  const toyi = () => {
    navigate("/zhibo");
  };
  //健康科普
  const tojian = () => {
    navigate("/jiankangkepu");
  };
  //商城买药
  const toshang = () => {
    navigate("/shop");
  };
  return (
    <div className={styles.gong_container}>
      <div className={styles.gong_one}>
        <NoticeBar
          content={"妙手医生互联网医院热线400-078-10000951-12345"}
          color="alert"
       className={styles.gong_notice}
          
        />
      </div>
      <div className={styles.gong_two}>
        <div onClick={tozhuan}>
          <img src={tu2} style={{ width: "50px", height: '50px' }} alt="" />
          <h2>预约挂号</h2>
          <p>30万+专家入驻</p>
        </div>
        <div onClick={tojisu}>
          <img src={tu3} style={{ width: "50px", height: '50px' }} alt="" />
          <h2>极速问诊</h2>
          <p>平均3分钟问诊</p>
        </div>
        <div onClick={tofuzhen}>
          <img src={tu} style={{ width: "50px", height: '50px' }} alt="" />
          <h2>复诊开方</h2>
          <p>慢病续方送到家</p>
        </div>
      </div>
      <div className={styles.gong_three}>
        <div onClick={towen}>
          <img src={xiao} style={{ width: "50px", height: "50px" }} alt="" />
          <p>问专家</p>
        </div>
        <div onClick={tokai}>
          <img src={xiao2} style={{ width: "50px", height: "50px" }}alt="" />
          <p>开药门诊</p>
        </div>
        <div onClick={toyi}>
          <img src={xiao3} style={{ width: "50px", height: "50px" }} alt="" />
          <p>义诊直播</p>
        </div>
        <div onClick={tojian}>
          <img src={xiao4} style={{ width: "50px", height: "50px" }} alt="" />
          <p>健康科普</p>
        </div>
        <div onClick={toshang}>
          <img src={xiao5} style={{ width: "50px", height: "50px" }}alt="" />
          <p>商城买药</p>
        </div>
      </div>
    </div>
  );
};

export default Index;
